<script setup lang="ts">
import { ref, computed } from "vue";
import type { TabsPaneContext } from "element-plus";
import { getLog as getIdpLog, execPlugin } from "@/api/idp/client";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Pointer from "@iconify-icons/ep/pointer";

const idpLog = ref<any>({});
const idpLogContent = ref<any>({});

const dialogVisible = ref(false);

const activeName = ref("base");

const deviceId = ref("");

const handleTabsClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
  activeName.value = tab.paneName.toString();
  console.log(tab.paneName);
  getIdpLogData();
};

const showDialog = (e: any) => {
  console.log(e);
  dialogVisible.value = true;
  deviceId.value = e.id;
  activeName.value = "base";
  getIdpLogData();
};

interface AppItem {
  displayName: string;
  displayVersion: string;
  installLocation: string;
  publisher: string;
  installDate: string;
}
const tableData = ref<AppItem[]>([]);
const search = ref("");
const filterTableData = computed(() =>
  tableData.value.filter(
    data =>
      !search.value ||
      data.displayName.toLowerCase().includes(search.value.toLowerCase()) ||
      data.publisher.toLowerCase().includes(search.value.toLowerCase())
  )
);

const getIdpLogData = () => {
  getIdpLog({ logType: activeName.value, clientId: deviceId.value }).then(
    res => {
      console.log(res);
      idpLog.value = res;
      switch (activeName.value) {
        case "cpu":
          idpLogContent.value = JSON.parse(res.content)[0];
          break;
        case "disk":
          idpLogContent.value = JSON.parse(res.content);
          break;
        case "memory":
          idpLogContent.value = JSON.parse(res.content);
          break;
        case "board":
          idpLogContent.value = JSON.parse(res.content);
          break;
        case "sysAbstract":
          idpLogContent.value = JSON.parse(res.content);
          break;
        case "appList":
          tableData.value = JSON.parse(res.content);
          break;
      }
      console.log(idpLogContent);
    }
  );
};

const msgList = ref([]);
const currMsg = ref("update.exe -l");

const sendInstruction = async () => {
  msgList.value.push({
    type: 1,
    content: currMsg.value
  });
  const arr = currMsg.value.split(" ");
  if (arr.length < 1) {
    return;
  }
  const argus = [];
  for (let i = 1; i < arr.length; i++) {
    argus.push(arr[i]);
  }
  execPlugin({ clientId: deviceId.value, cmd: arr[0], argus: argus })
    .then(res => {
      msgList.value.push({
        type: 2,
        content: res
      });
    })
    .catch(() => {
      msgList.value.push({
        type: 2,
        content: "未及时响应"
      });
    });
  console.log(msgList.value);
  currMsg.value = "";
};

defineExpose({
  showDialog
});
</script>

<template>
  <div>
    <el-dialog v-model="dialogVisible" width="700px">
      <el-tabs
        type="border-card"
        tab-position="left"
        @tab-click="handleTabsClick"
        v-model="activeName"
      >
        <el-tab-pane label="基础信息" name="base">
          <el-card style="max-width: 700px">
            <div style="height: 400px; overflow-y: auto">
              <el-row v-for="(item, index) in msgList" :key="index">
                <el-card
                  style="width: 680px"
                  shadow="hover"
                  v-if="item.type == 1"
                >
                  指令：{{ item.content }}
                </el-card>
                <el-card style="width: 680px" shadow="hover" v-else>
                  回复：
                  <div style="white-space: pre-line">{{ item.content }}</div>
                </el-card>
              </el-row>
            </div>
            <div>
              <el-input v-model="currMsg" style="max-width: 500px" />
              <el-button
                type="primary"
                :icon="useRenderIcon(Pointer)"
                @click="sendInstruction"
              >
                发送指令
              </el-button>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="CPU信息" name="cpu">
          <el-descriptions
            class="margin-top"
            title="数据来源与插件: cpu"
            :column="1"
            border
          >
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                名称
              </template>
              {{ idpLogContent.Name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                描述
              </template>
              {{ idpLogContent.Description }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                CPUID
              </template>
              {{ idpLogContent.ProcessorId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                最大处理速度
              </template>
              {{ idpLogContent.MaxClockSpeed }} MHz
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                制造商
              </template>
              {{ idpLogContent.Manufacturer }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                二级缓存
              </template>
              {{ idpLogContent.L2CacheSize }} KB
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                三级缓存
              </template>
              {{ idpLogContent.L3CacheSize }} KB
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="内存信息" name="memory">
          <el-descriptions
            class="margin-top"
            title="数据来源与插件: memory"
            border
          >
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                内存条个数
              </template>
              合计内存条个数：{{ idpLogContent.length }} 条
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            class="margin-top"
            :column="2"
            border
            v-for="(item, index) in idpLogContent"
            :key="index"
            :value="item"
          >
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                大小
              </template>
              {{ Math.floor(item.Capacity / (1024 * 1024 * 1024)) }} GB
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                描述
              </template>
              {{ item.Description }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                读写速度
              </template>
              {{ item.Speed }} MHz
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                序列号
              </template>
              {{ item.SerialNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                生产商
              </template>
              {{ item.Manufacturer }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                电压配置
              </template>
              {{ item.ConfiguredVoltage }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                数据字长
              </template>
              {{ item.DataWidth }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="硬盘信息" name="disk">
          <el-descriptions
            class="margin-top"
            title="数据来源与插件: disk"
            border
          >
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                硬盘个数
              </template>
              合计物理硬盘个数：{{ idpLogContent.length }} 块
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            class="margin-top"
            :column="2"
            border
            v-for="(item, index) in idpLogContent"
            :key="index"
            :value="item"
          >
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                大小
              </template>
              {{ Math.floor(item.Size / (1024 * 1024 * 1024)) }} GB
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                描述
              </template>
              {{ item.Model }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                类型
              </template>
              {{ item.MediaType }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                序列号
              </template>
              {{ item.SerialNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                接口类型
              </template>
              {{ item.InterfaceType }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                每个扇区字节数
              </template>
              {{ item.BytesPerSector }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                厂商驱动固件信息
              </template>
              {{ item.FirmwareRevision }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="系统概述" name="sysAbstract">
          <el-descriptions
            class="margin-top"
            title="数据来源: IDP调用WMI获取"
            :column="1"
            border
          >
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                操作系统
              </template>
              {{ idpLogContent.Caption }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                细节版本号
              </template>
              {{ idpLogContent.BuildNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                内核版本
              </template>
              {{ idpLogContent.KernelVersion }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                计算机名
              </template>
              {{ idpLogContent.CSName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                系统位数
              </template>
              {{ idpLogContent.OSArchitecture }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                设备商家
              </template>
              {{ idpLogContent.Manufacturer }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                设备型号
              </template>
              {{ idpLogContent.Model }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                是否为主操作系统
              </template>
              {{ idpLogContent.Primary }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                系统序列号
              </template>
              {{ idpLogContent.SerialNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                系统版本号
              </template>
              {{ idpLogContent.Version }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="主板信息" name="board">
          <el-descriptions
            class="margin-top"
            title="数据来源与插件：board ,参数为：base"
            :column="1"
            border
          >
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-user" />
                主板序列号
              </template>
              {{ idpLogContent.boardSerialNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-mobile-phone" />
                制造商
              </template>
              {{ idpLogContent.boardManufacturer }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-mobile-phone" />
                型号
              </template>
              {{ idpLogContent.boardProduct }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-mobile-phone" />
                BIOS厂商
              </template>
              {{ idpLogContent.biosManufacturer }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template v-slot:label>
                <i class="el-icon-mobile-phone" />
                BIOS序列号
              </template>
              {{ idpLogContent.biosSerialNumber }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="软件列表" name="appList">
          <el-table
            :data="filterTableData"
            style="width: 100%"
            max-height="400"
          >
            <el-table-column label="软件名称" prop="displayName" />
            <el-table-column label="版本" prop="displayVersion" />
            <el-table-column align="right">
              <template #header>
                <el-input
                  v-model="search"
                  size="small"
                  placeholder="按软件名和发行商查找"
                />
              </template>
              <el-table-column label="发行商" prop="publisher" />
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<style scoped></style>
